<template>
  <Modal v-model="show"
         :width="width"
         :mask-closable="maskClosable"
         :class-name="'c-modal '+customClass"
         :closable="false"
         :footer-hide="true" >
    <!--<div slot="header"></div>-->
    <slot name="header">
      <div class="c-model-header flex col-center row-between">
        <slot name="title"><span class="header-title">{{title}}</span></slot>
        <img src="@/assets/images/icon-close.png" alt="" v-if="showCloseIcon" @click="show = false"/>
      </div>
    </slot>
    <div class="c-model-body">
      <slot></slot>
    </div>
    <slot name="footer">
      <div :class="['c-model-footer', footerClass]">
        <i-button type="info" @click="cancel" class="mr-20" v-if="showCancelBtn">取消</i-button>
        <i-button type="primary" @click="confirm">{{ confirmText }}</i-button>
      </div>
    </slot>
  </Modal>
</template>
<script>
export default {
  name: "index",
  props: {
    value: false,
    title: '',
    customClass: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '30%'
    },
    btnPosition: {
      type: String,
      default: 'right'
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    showCancelBtn: {
      type: Boolean,
      default: true
    },
    showCloseIcon: {
      type: Boolean,
      default: true
    },
    asyncClose: {
      type: Boolean,
      default: false
    },
    maskClosable: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(val) {
        if (!val) {
          if (this.asyncClose) {
            this.$emit("beforeClose", val)
            return
          }
        }
        this.$emit("input", val)
        if (!val) {
          this.$emit("close", val)
        }
      }
    },
    footerClass() {
      const str = 'flex pt-30 pb-24'
      if (this.btnPosition === 'right') {
        return `${str} row-end`
      }
      if (this.btnPosition === 'center') {
        return `${str} row-center`
      }
    }
  },
  methods: {
    cancel() {
      this.show = false
      this.$emit('cancel')
    },
    confirm() {
      this.$emit('confirm')
    }
  }
}
</script>

<style  lang="scss">
@import '@/assets/style/mixin.scss';
.ivu-modal-header {
  border: none;
  display: none;
}
.ivu-modal-body {
  padding: 0;
  .c-model-body {
    padding: 20px;
  }
}
.c-model-header {
  padding: 20px 20px 0;
  position: relative;
  z-index: 1;
  .header-title {
    font-weight: bold;
    font-size: 18px;
    padding-left: 8px;
    border-left: 4px solid;
    @include border-color();
  }
  img {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
}
.c-model-footer {
  padding: 20px;
  position: relative;
  z-index: 1;
  .ivu-btn {
    width: 96px;
  }
}
</style>
